<template>
    <div class="map" id="map"></div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue"
import "ol/ol.css"
import Map from "ol/Map"
import OSM from "ol/source/OSM"
import TileLayer from "ol/layer/Tile"
import View from "ol/View"
import { fromLonLat } from "ol/proj"

export default defineComponent({
    name: "OpenlayersMap.component",
    props: {
        mapOnloadCB: {
            required: true,
            type: Function
        }
    },
    setup(props, context) {
        const map = ref<Map | null>(null)

        onMounted(() => {
            map.value = new Map({
                layers: [
                    new TileLayer({
                        source: new OSM()
                    })
                ],
                target: "map",
                view: new View({
                    center: fromLonLat([106.557165,29.570494]),
                    zoom: 10
                })
            })

            map.value.on("loadend", (params) => {
                props.mapOnloadCB(params)
            })
        })
    }
})
</script>

<style lang="less">
.map {
    width: 100%;
    height: 100%;
    .ol-attribution{
        display: none;
    }
}
</style>
